import React from 'react';
// import PropTypes from 'prop-types';
import { Button,Icon, Message, Upload } from '@alifd/next';
import api from '../../utils/api';

class PageHeadExcelAdd extends React.Component {
  constructor(props) {
    super(props);
    this.setState = {

    };
  }

  onChange= () => {
    Message.show({
      type: 'loading',
      content: '上传中...',
    });
  }

  onSuccess= () => {
    Message.show({
      type: 'success',
      content: '上传成功！',
    });
  }
  onErroer= () => {
    Message.show({
      type: 'error',
      content: '上传失败！',
    });
  }
  render() {
    return (
      <div style={styles.container}>
        <h3 style={styles.title}>{this.props.title}</h3>
        <Upload style={styles.uploadCard}
          action={`${api.GoodsExcel}?ecxel=1`}
          onChange={this.onChange}
          onSuccess={this.onSuccess}
          onError={this.onError}
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
          headers={{ token: sessionStorage.getItem('token') }}
                // data={data}
          autoUpload
          formatter={(res, file) => {
                  // 函数里面根据当前服务器返回的响应数据
                  // 重新拼装符合组件要求的数据格式
                  return {
                    success: res.code === 200,
                  };
                }}
          name="excel"
        >
          <Button type="primary" style={styles.upload}>
          <Icon type="upload" size="medium" style={styles.upload.uploadIcon} />
          导入商品信息
          </Button>
          {/* <span style={styles.upload}>导入商品信息</span> */}
        </Upload>
      </div>
    );
  }
}

const styles = {
  container: {
    margin: '10px 10px',
    paddingBottom: '10px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  title: {
    margin: '0',
    padding: '0',
    fontSize: '22px',
    color: 'rgba(0, 0, 0, 0.85)',
    fontWeight: 'bold',
  },
  uploadCard: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: '124',
    height: '40px',
    outline: 'none',
    color: '#fff',
  },
  upload: {
    float: 'right',
    color: '#fff',
    backgroundImage: 'linear-gradient(90deg, #FFA20D 0%, #FF6E02 100%)',
    boxShadow: '0 -2px 6px 0 rgba(255,110,2,0.30)',
    borderRadius: '20px 20px 0 0',
    width: '124px',
    height: '40px',
    cursor: 'pointer',
    border: 'none',
    position: 'relative',
    top: '20px',
    right: '-10px',
    letterSpacing: '1px',
    fontSize: '14px',
    uploadIcon: {
      cursor: 'pointer',
      fontSize: '20px',
      textAlign: 'left',
      lineHeight: '22px',
    },
  },
};

export default PageHeadExcelAdd;
